import * as React from "react";
import { RouteComponentProps } from "react-router-dom";
import { ISku } from "../../types";

import style from "./style.less";
import Nav from "../../components/Nav";
import Checkbox from "../../components/Checkbox";
import ShopCarItem from "../../components/ShopCarItem";
import * as api from "../../services/api";

interface State {
  isCheck: boolean[];
  isAllCheck: boolean;
  carlist: ISku[];
}

export default class Shopcar extends React.Component<RouteComponentProps> {
  state: State = {
    isCheck: [],
    isAllCheck: false,
    carlist: [],
  };

  /**
   * 获取购物车数据功能
   * 获取商品列表
   * 1.未登录 跳转到login
   * 2.初始化复选框状态
   * 3.更新UI
   */
  async getData() {
    try {
      let result = await api.listCart();
      if (result.stat === "OK") {
        let isCheck = [];
        result.rows.map(() => {
          isCheck.push(false);
        });
        this.setState({
          isCheck,
          carlist: result.rows,
        });
      } else {
        this.props.history.push("/login");
      }
    } catch {}
  }

  componentDidMount() {
    this.getData();
  }

  async doRemove() {
    let ids: string[] = [];
    const carlist = this.state.carlist.map((v) => v);
    const isCheck = this.state.isCheck.map((v) => v);
    isCheck.map((v, w) => {
      if (v === true) {
        ids.push(carlist[w].id);
      }
    });
    await api.removeCart(ids);
    this.getData();
  }

  doChange(isChecked, index) {
    let isAllCheck = true;
    let isCheck = this.state.isCheck.map((v, w) => {
      if (w === index) v = isChecked;
      if (v === false) isAllCheck = false;
      return v;
    });
    this.setState({ isCheck, isAllCheck });
  }

  /**
   * 全选功能
   */
  doAllChange(isAllCheck) {
    let isCheck = this.state.isCheck.map(() => isAllCheck);
    this.setState({
      isCheck,
      isAllCheck,
    });
  }

  /**
   * 渲染删除按钮
   * 根据isCheck的状态来更新UI
   */
  isDisabled() {
    let isPick = false;
    let isCheck = this.state.isCheck;
    for (let i = 0; i < isCheck.length; i++) {
      if (isCheck[i] === true) {
        isPick = true;
        break;
      }
    }
    if (isPick === false) {
      return (
        <button className={style.delete} disabled>
          删除
        </button>
      );
    } else {
      return (
        <button className={style.delete} onClick={() => this.doRemove()}>
          删除
        </button>
      );
    }
  }

  render() {
    if (this.state.carlist.length === 0)
      return (
        <div className={style.back}>
          <div className={style.empty}>
            <i className="iconfont icon-shop" />
            <span>购物车是空的</span>
          </div>
          <Nav />
        </div>
      );
    return (
      <div className={style.back}>
        <div className={style.wrapper}>
          <div className={style.carlist}>
            {this.state.carlist.map((item, index) => (
              <ShopCarItem
                key={item.id}
                value={this.state.isCheck[index]}
                sku={item}
                index={index}
                onChange={this.doChange.bind(this)}
              />
            ))}
          </div>
        </div>
        <div className={style.control}>
          <Checkbox
            value={this.state.isAllCheck}
            onChange={this.doAllChange.bind(this)}
          />
          <span>全选</span>
          {this.isDisabled()}
        </div>
        <Nav />
      </div>
    );
  }
}
